import { Observable,Subject } from 'rxjs';
import { Hero } from './../heroes/hero';
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
import { debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators'

@Component({
  selector: 'app-hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: ['./hero-search.component.css']
})
export class HeroSearchComponent implements OnInit {
  heroes$: Observable<Hero[]>;
  private searchTerms = new Subject<string>();
  constructor(
    private heroService: HeroService
  ) { }

  search(term: string):void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.heroes$ = this.searchTerms.pipe(
      //wait
      debounceTime(3000),
      distinctUntilChanged(),
      switchMap((term: string)=> this.heroService.searchHeroes(term)),
    );
  }



}
